<template>
  <div class="profile-container">
    <div class="flex-center form-item">
      <div class="flexitem desc">Firstname:</div>
      <div class="flexitem content">
        <cube-input type="text" v-model="profile.firstname" placeholder="real name" />
      </div>
    </div>

    <div class="flex-center form-item">
      <div class="flexitem desc">Lastname:</div>
      <div class="flexitem content">
        <cube-input type="text" v-model="profile.lastname" placeholder="real name" />
      </div>
    </div>
    <div class="flex-center form-item">
      <div class="flexitem desc">Phone:</div>
      <div class="flexitem content">
        <cube-input type="text" v-model="profile.mobilePhone" placeholder="phone number" />
      </div>
    </div>
    <div class="flex-center form-item">
      <div class="flexitem desc">Email:</div>
      <div class="flexitem content">
        <cube-input type="text" v-model="profile.email" placeholder="email address" />
      </div>
    </div>
    <div class="flex-center form-item">
      <div class="flexitem desc">Gender:</div>
      <div class="flexitem content">
        <!-- <cube-input type="text" v-model="profile.email" placeholder="email address"/> -->
        <cube-radio-group v-model="profile.gender" :options="genders" :horizontal="true" />
      </div>
    </div>

    <div class="flex-center column">
      <div class="flexitem">
        Interest products
      </div>
      <div class="flexitem">
        <ul class="category-list flexbox wrap">
          <li @click="onSelectCategory(item, i)" :class="{'selected': item.selected}" v-for="(item, i) of categories" :key="i">
            <span>{{ item.text }}</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="flex-center form-item">
      <cube-button primary @click="onSubmit">
        <span>Submit</span>
      </cube-button>
    </div>
    <div class="flex-center form-item">
      <cube-button primary @click="onSignOut">
        <span>Sign out</span>
      </cube-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Cookie from 'js-cookie';
import { Api } from '@/api';
import { CategoryKV } from '@/utils/constants';
declare const $Vue: Vue;

@Component
export default class MyProfile extends Vue {
  private profile: any = {
    username: "",
    level: "expert",
    headUrl:
      "http://img0.imgtn.bdimg.com/it/u=311307345,3690847989&fm=11&gp=0.jpg"
  };

  private genders: any = [{
    label: 'male',
    value: 1,
  },
  {
    label: 'female',
    value: 2,
  },];

  private categories = CategoryKV.slice();

  protected mounted() {
    $Vue.$emit('title', {
      message: 'My Profile'
    });
  }

  /**
   * 选择种类
   */
  private onSelectCategory(item: any, i: number) {
    this.$set(this.categories[i], 'selected', !item.selected);
  }

  /**
   * 提交更改
   */
  private onSubmit() {
    
  }

  /**
   * 退出登录
   */
  private onSignOut() {
    Cookie.remove('buyer_token');
    Cookie.remove('buyer_userId');
    Cookie.remove('username');
    this.$router.push({
      name: 'Login',
    });
  }
  /**
   * 更新用户信息
   */
  private async submitUserProfile() {
    const params: any = {
    };
    const { data } = await Api.getProfitMembers.r(params);
    console.log("submitUserProfile", data);
    if (data.result === 0) {
    } else {
      this.$createToast({
        txt: "Something has gone wrong.",
        type: "warn",
        time: 3000
      }).show();
    }
  }
}
</script>

<style lang="less" scoped>
@import url(../../styles/variables.less);
.profile-container {
  width: 100%;
  height: 100%;
  .form-item {
    height: 30px;
    padding: 4px;
    .cube-input-field {
      padding: 4px !important;
    }
    .desc {
      color: #676767;
      flex-basis: 30%;
      width: 30%;
    }
    .content {
      flex-basis: 70%;
      width: 70%;
    }
  }

  .category-list {
    li {
      height: 24px;
      line-height: 24px;
      padding: 2px;
      font-size: 13px;
      border-radius: 4px;
      border: 1px solid @primary;
      color: @primary;
      margin: 2px;
      &.selected {
        color: white;
        background: @primary;
      }
    }
  }
}
</style>

